<template>
	<view class="page-container">
		
		<uni-list class="table-view-group">
		    <uni-list-item title="头像" :showArrow="false">
				<template v-slot:right="">
					<block v-if="litpic">
						<image class="user-hd-img" :src="litpic" mode="aspectFill" @click="chooseImages"></image>
					</block>
					<block v-else>
						<image class="user-hd-img" v-if="!litpic" :src="'https://static.member.stourweb.cn/uniapp/static/images/' + 'default_header_img.png'" mode="widthFix" @click="chooseImages"></image>
					</block>
					<text class="iconfont arrow-icon">&#xe67f;</text>
				</template>
			</uni-list-item>
			<uni-list-item title="昵称" :showArrow="false">
				<template v-slot:right="">
					<input type="text" class="item-input" placeholder="你的昵称" placeholder-class="phclass" v-model="nickname" />
				</template>
			</uni-list-item>
		</uni-list>
		
		<uni-list class="table-view-group">
		    <uni-list-item title="真实姓名" :showArrow="false">
				<template v-slot:right="">
					<input type="text" class="item-input" placeholder="你的真实姓名" placeholder-class="phclass" v-model="truename" />
				</template>
			</uni-list-item>
		    <uni-list-item title="性别" :showArrow="false">
				<template v-slot:right="">
					<picker @change="bindPickerGender" :value="sex" :range="genderArray">
						<view class="item-text">{{sex}}<text class="iconfont arrow-icon">&#xe67f;</text></view>
					</picker>
				</template>
			</uni-list-item>
		    <uni-list-item title="出生年月" :showArrow="false">
				<template v-slot:right="">
					<picker mode="date" :value="birth_date" fields="day" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="item-text">{{birth_date}}<text class="iconfont arrow-icon">&#xe67f;</text></view>
					</picker>
				</template>
			</uni-list-item>
		    <uni-list-item title="籍贯" @click="openAddres" :showArrow="false">
				<template v-slot:right="">
					<view class="item-text">{{native_place}}<text class="iconfont arrow-icon">&#xe67f;</text></view>
					
				</template>
			</uni-list-item>
		    <uni-list-item title="身份证号码" :showArrow="false">
				<template v-slot:right="">
					<input type="text" v-model="cardid" class="item-input" placeholder="你的身份证号码" placeholder-class="phclass" />
				</template>
			</uni-list-item>
		    <uni-list-item title="常住地址" :showArrow="false">
				<template v-slot:right="">
					<textarea @blur="bindTextAreaBlur" v-model="address" class="item-input" placeholder="详细地址" placeholder-class="phclass" auto-height />
				</template>
			</uni-list-item>
		</uni-list>
		
		<uni-list class="table-view-group">
		    <uni-list-item title="QQ" :showArrow="false">
				<template v-slot:right="">
					<input type="text" class="item-input" placeholder="你的QQ" placeholder-class="phclass" v-model="qq" />
				</template>
			</uni-list-item>
		    <uni-list-item title="微信号" :showArrow="false">
				<template v-slot:right="">
					<input type="text" class="item-input" placeholder="你的微信号" placeholder-class="phclass" v-model="wechat" />
				</template>
			</uni-list-item>
		    <uni-list-item title="星座" :showArrow="false">
				<template v-slot:right="">
					<input type="text" class="item-input" placeholder="你的星座" placeholder-class="phclass" v-model="constellation" />
				</template>
			</uni-list-item>
		    <uni-list-item title="个性签名" :showArrow="false">
				<template v-slot:right="">
					<textarea @blur="bindTextAreaBlur" class="item-input" placeholder="个性签名" placeholder-class="phclass" auto-height v-model="signature" />
				</template>
			</uni-list-item>
		</uni-list>
		
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
		
		<view class="save-btn-block" @click="submitUserInfo()">保存</view>
		
	</view>
</template>

<script>
	import uniList from "@/components/uni-list/uni-list.vue"
	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
	import simpleAddress from '@/components/simple-address/simple-address.vue'
	import {dealStrNull} from '@/utils/utils.js'
	import uploadImg from "@/utils/upload_img.js"
	import { pathToBase64 } from "@/utils/image-tools.js"
	
	export default {
	    components: {
			uniList,
			uniListItem,
			simpleAddress
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				userInfo: {},
				sex: "",
				litpic: "",
				nickname: "",
				truename: "",
				birth_date: "",
				native_place: "",
				cardid: "",
				address: "",
				qq: "",
				wechat: "",
				constellation: "",
				signature: "",
				genderArray: ['男', '女', '保密'],
				selectDate: "请选择",
				cityPickerValueDefault: [0, 0, 0],
				selectPlace: "请选择",
				imageGroup: []
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo');
			this.setUserInfo();
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			//设置默认值
			setUserInfo(){
				let userInfo = dealStrNull(this.userInfo);
				this.sex = userInfo.sex;
				this.litpic = userInfo.litpic;
				this.nickname = userInfo.nickname;
				this.truename = userInfo.truename;
				this.birth_date = userInfo.birth_date;
				this.native_place = userInfo.native_place;
				this.cardid = userInfo.cardid;
				this.address = userInfo.address;
				this.qq = userInfo.qq;
				this.wechat = userInfo.wechat;
				this.constellation = userInfo.constellation;
				this.signature = userInfo.signature;
			},
			// 性别选择
			bindPickerGender: function(e) {
				let index = e.target.value;
				this.sex = this.genderArray[index]
			},
			
			// 日期选择
			bindDateChange(e){
				this.birth_date = e.target.value
			},
			
			openAddres() {
				this.cityPickerValueDefault = [0,0,1]
				this.$refs.simpleAddress.open();
			},
			
			// 省市区选择
			onConfirm(e) {
				this.native_place = e.label;
			},
			
			// 地址
			bindTextAreaBlur(){
				
			},
			
			// 获取日期
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//保存用户信息
			async submitUserInfo(){
				// 判断格式是否正确
				let idcard_patter = /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/;
				if( this.cardid && !idcard_patter.test(this.cardid) ){
					return uni.showToast({
						title: '身份证号格式错误',
						icon: 'none'
					});
				}
				if( this.qq && (this.qq.length <5 || isNaN(this.qq)) ){
					return uni.showToast({
						title: 'qq号格式错误',
						icon: 'none'
					});
				}
				let params = {
					method:'api/v2/member/info/modify',
					sex :this.sex,
					litpic :this.litpic,
					nickname :this.nickname,
					truename :this.truename,
					birth_date :this.birth_date,
					native_place :this.native_place,
					cardid :this.cardid,
					address :this.address,
					qq :this.qq,
					wechat :this.wechat,
					constellation :this.constellation,
					signature :this.signature,
				};
				let res = await this.$http(params)
				if( res.status ){
					//保存成功
					let params1 = {
						method: "api/v2/member/info/show"
					};
					let res1 = await this.$http(params1)
					if( res1.data ){
						uni.setStorageSync('userInfo', res1.data);
					}
					uni.showToast({
						title: '保存成功',
						icon:'none',
						duration:1500,
						success() {
							setTimeout(function(){
								uni.navigateBack({})
							},2000)
						}
					});
				}else{
					uni.showToast({
						title: res.msg?res.msg:'请求错误',
						icon:'none'
					});
				}
				
			},
			
			chooseImages(){
				// 计算可以选择的图片
				uni.chooseImage({
				    count: 1, //每次只能上传1张图片，最多上传9张
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
				    success: (res) => {
						uni.showLoading({
							title: '上传中...'
						})
						
						const tempFilePaths = res.tempFilePaths[0];
						pathToBase64(tempFilePaths).then(async res => {
							let url = await uploadImg(res);
							this.litpic = url
							
						}).catch(error => {
						    console.error(error)
						})
						
						
						
						
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.page-container{
		padding: 24rpx;
	}
	.table-view-group{
		margin-bottom: 20rpx;
		border-radius: $uni-border-radius-lg;
	}
	.save-btn-block{
		color: $uni-text-color-inverse;
		padding: 22rpx 0;
		text-align: center;
		margin-top: 40rpx;
		font-size: $uni-font-size-lg;
		border-radius: $uni-border-radius-lg;
		background-color: $uni-bg-color-primary;
	}
	.item-text{
		color: $uni-text-color;
		font-size: $uni-font-size-sm;
	}
	.item-input{
		width: 400rpx;
		margin-right: 30rpx;
		text-align: right;
		font-size: $uni-font-size-sm;
	}
	.arrow-icon{
		vertical-align: middle;
		margin-top: -4rpx;
	}
	.phclass{
		color: $uni-text-color-placeholder;
	}
	.user-hd-img{
		width: 80rpx;
		height: 80rpx;
		border-radius: $uni-border-radius-circle;
	}
</style>
